<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <child message='hello' mht='马化腾'></child> -->
			<div>
				<input v-model="parentMsg" />
				<br />
				<child v-bind:message='parentMsg'></child>
			</div>
		</div>
		<script>
			// 注册
			Vue.component('child',{
				// 声明 props
				props:['message','mht'],
				// 同样也可以在 vm 实例中像 “this.message” 这样使用
				template:'<span>{{message}},{{mht}}</span>'
			})
			// 创建根实例
			new Vue({
				el:'#app',
				data:{
					parentMsg:'父组件内容'
				}
			})
		</script>
		<p>--------------------------------------------</p>
		<div id="app1">
			<div id="counter-event-example">
				<p>{{total}}</p>
				<button-counter v-on:increment='incrementTotal'></button-counter>
				<button-counter v-on:increment='incrementTotal'></button-counter>
			</div>
		</div>
		<script>
			Vue.component('button-counter',{
				template:'<button v-on:click="incrementHandler">{{counter}}</button>',
				data:function(){
					return{
						counter:0
					}
				},
				methods:{
					incrementHandler:function(){
						this.counter += 1
						this.$emit('increment')
					}
				},
			})
			new Vue({
			  el: '#counter-event-example',
			  data: {
				total: 0
			  },
			  methods: {
				incrementTotal: function () {
				  this.total += 1
				}
			  }
			})
		</script>
	</body>
</html>
